<template>
  <div class="header">
    <el-row class="header-top">
      <el-col :span="8"></el-col>
      <el-col :span="8">
        <div class="logo content">
          <img @click="toHome" src="/images/logo.png" />
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconsearch" />
          </svg>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="content operat">
          <component @showLogin="showLogin" :is="who"></component>
          <router-link to="/about/recruit" tag="a" class="jiangshi">MMooc讲师</router-link>
        </div>
      </el-col>
    </el-row>

    <transition
      enter-active-class="animated fadeIn faster"
      leave-active-class="animated fadeOut faster"
    >
      <Login @close="closeLogin" v-if="login" />
    </transition>
  </div>
</template>
<script>
import { Row, Col } from "element-ui";
export default {
  data() {
    return {
      who: "",
      login: false
    };
  },
  components: {
    ElRow: Row,
    ElCol: Col,
    avatar: () => import("./components/avatar"),
    loginItem: () => import("./components/loginItem"),
    none: () => import("./components/none"),
    Login: () => import("@/commonPages/commonComponents/Login")
  },
  computed: {
    loginStatus() {
      return this.$store.state.login.loginStatus;
    }
  },
  methods: {
    toHome() {
      this.$router.push("/");
    },
    closeLogin() {
      this.login = false;
    },
    showLogin() {
      this.login = true;
    }
  },
  watch: {
    login(newValue) {
      if (newValue) {
        document.body.style.overflow = "hidden";
      } else {
        document.body.style.overflow = "visible";
      }
    },
    loginStatus(newValue, oldValue) {
      if (newValue + oldValue === 1) return;
      if (newValue === 1) {
        this.who = "avatar";
      } else if (newValue === 2) {
        this.who = "loginItem";
      } else {
        this.who = "none";
      }
    }
  },
  mounted() {
    let loginStatus = this.$store.state.login.loginStatus;
    if (loginStatus == 1) {
      this.who = "avatar";
    } else if (loginStatus == 2) {
      this.who = "loginItem";
    } else {
      this.who = "none";
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/common.scss";

.header {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  &-top {
    padding-top: 10px;
    height: 100%;
    width: 100%;
    .logo {
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 200px;
        cursor: pointer;
      }
      .icon {
        margin-top: 30px;
        width: 25px;
        font-weight: 100;
        height: 25px;
        color: $fontColor;
      }
    }
    .operat {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-right: 45px;
      span {
        margin-left: 25px;
        font-weight: $fontWeight;
        cursor: default;
      }
      .avatar {
        margin-right: 20px;
      }
      .login-item {
        margin-right: 20px;
      }
      .jiangshi {
        font-weight: 400;
        display: inline-block;
        box-sizing: border-box;
        padding: 15px 20px;
        text-decoration: none;
        color: #67c23a;
        background-color: #fff;
        border: 1px solid #67c23a;
        transition: all 0.2s;
        &:hover {
          background-color: #67c23a;
          border: 1px solid #67c23a;
          color: #fff;
        }
        &.router-link-active {
          background-color: #67c23a;
          border: 1px solid #67c23a;
          color: #fff;
        }
      }
    }
  }
  &-bottom {
    height: 40%;
  }
  .el-col {
    height: 100%;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .content {
    height: 100%;
  }
}
</style>
